import { onMounted, onUnmounted, reactive, ref } from "vue";

function useWindowResize() {
  const width = ref(0);
  const height = ref(0);

  const pointrEvent = reactive({
      x: 0,
      y: 0
  })


  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }

  function onClick(event:any) {
    const { x ,y } = event;
    pointrEvent.x = x;
    pointrEvent.y = y;
  }

  onMounted(() => {
    window.addEventListener("resize", onResize);
    window.addEventListener("click", onClick);
    onResize();
  });

  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
    window.removeEventListener("click", onClick);
  });

  return {
    width,
    height,
    pointrEvent
  };
}

export default useWindowResize;